<template>
	<view class="bindDetail">
		<view class="" style="position: fixed;top: 0;left: 0;width: 750rpx;z-index: 99999;" v-if="ceShow">
			<u-notice-bar mode="horizontal" :list="noticeList"></u-notice-bar>
		</view>
		<u-modal v-model="show" :show-title="false" width="690" :show-confirm-button="false">
			<view class="slot-content">
				<view class="dialogMain">
					<view class="dialogMain_top">
						<image src="../../static/img/close.png" mode="" @click="closeDialog"></image>
					</view>
					<view class="" style="padding: 0 18rpx;">
						<span>{{nowText}}</span>
						<u-input v-model="value" type="textarea" :border="false" :height="300" />
					</view>
					<view class="dialogMain_bottom">
						<view class="" @click="submit">
							发布
						</view>
					</view>
				</view>
			</view>
		</u-modal>
		<view class="bindDetail_top">
			<view class="bindDetail_top_top">
				<image :src="detail.image" mode=""></image>
				<view class="bindDetail_top_top_title">
					{{detail.title}}
				</view>
				<view class="bindDetail_top_top_date">
					<view class="">
						{{timestamp(detail.createtime)}} 发布
					</view>
					<view class="user_box" v-if="detail.user_id && detail.user_id != 0" @click="goSl">
						<image :src="detail.user.avatar" mode=""></image>
						<span>{{detail.user.nickname}}</span>
					</view>
				</view>
				<!-- <rich-text class="bindDetail_top_top_ctx" :nodes="detail.content" @itemclick.stop="goHtmlImage"></rich-text> -->
				<u-parse :html="detail.content" :tag-style="tagStyle"></u-parse>
			</view>
			<view class="bindDetail_top_bottom">
				<image :src="userInfo.avatar" mode=""></image>
				<view class="bindDetail_top_bottom_vsInput" @click="showDialog">
					说点什么
				</view>
			</view>
		</view>
		<view class="bindDetail_bottom">
			<view class="bindDetail_bottom_item" v-for="(item,index) in applyList" :key="index">
				<view class="bindDetail_bottom_item_top">
					<view class="bindDetail_bottom_item_top_left">
						<image :src="item.user.avatar" mode=""></image>
						<span>{{item.user.nickname}}</span>
					</view>
					<!-- <view class="bindDetail_bottom_item_top_right" @click="reply(item)">
						回复
					</view> -->
					<view class="bindDetail_bottom_item_top_right">
						{{timestamp(item.createtime)}}
					</view>
				</view>
				<view class="bindDetail_bottom_item_bottom">
					{{item.content}}
				</view>
			</view>
			<view class="" style="padding: 20rpx 0;">
				<u-loadmore :status="status" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		baseUrl
	} from '@/config/config.js'
	import {
		getXqDetail,
		getXqDetailLy
	} from '@/api/index.js'
	import {
		log
	} from 'util';
	export default {
		data() {
			return {
				status: 'loadmore',
				nowText: '',
				value: '',
				show: false,
				id: '',
				page: 1,
				limit: 10,
				detail: {},
				applyList: [],
				userInfo: {},
				ceShow: false,
				noticeList: [],
				tagStyle: {
					img: 'max-width: 100%;',
					span: 'text-wrap: wrap',
					video:'height:auto;'
				}
			}
		},
		methods: {
			goSl() {
				let that = this
				that.ws.pageFun(function() {
					let message = {
						c: 'Message',
						a: 'openSession',
						data: {
							'id': that.detail.user.fastim_id,
							'type': 'user'
						}
					}
					that.ws.send(message);
				}, that)
			},
			goHtmlImage(e) {
				// console.log(e);
				let imgPath = e.detail.node.attrs.src;
				this.handlePreViewImage(imgPath);
			},
			handlePreViewImage(imgPath) {
				let arr = [];
				arr.push(imgPath);
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['保存图片到相册'],
						success: function(data) {
							console.log(data.tapIndex);
							if (data.tapIndex == 0) {
								uni.saveImageToPhotosAlbum({
									filePath: imgPath,
									success: function() {
										uni.showToast({
											title: '保存成功',
											duration: 2000
										});
									}
								});
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			reply(item) {
				this.nowText = `@${item.user.nickname}`
				this.showDialog()
			},
			async submit() {
				if (this.value == '') {
					return uni.showToast({
						icon: 'none',
						title: '请输入内容'
					})
				}
				let data = {
					id: this.id,
					content: this.value
				}
				const res = await getXqDetailLy(data)
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
				this.closeDialog()
				this.page = 1
				this.applyList = []
				this.getDetail()
			},
			closeDialog() {
				this.show = false
				this.value = ''
				this.nowText = ''
			},
			showDialog() {
				this.show = true
			},
			async getDetail() {
				this.status = 'loading'
				const res = await getXqDetail({
					id: this.id,
					page: this.page,
					limit: this.limit
				})
				// res.data.info.content = res.data.info.content.replace(/\\/g, '')
				this.detail = res.data.info
				this.applyList = [...this.applyList, ...res.data.apply.data]
				if (res.data.apply.data.length < this.limit) {
					this.status = 'nomore'
				} else {
					this.status = 'loadmore'
				}
			},
			timestamp(timestamp) {
				var date = new Date(timestamp * 1000); // 转换为毫秒
				var year = date.getFullYear();
				var month = ('0' + (date.getMonth() + 1)).slice(-2);
				var day = ('0' + date.getDate()).slice(-2);
				var hours = ('0' + date.getHours()).slice(-2);
				var minutes = ('0' + date.getMinutes()).slice(-2);
				var seconds = ('0' + date.getSeconds()).slice(-2);

				return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
			}
		},
		onLoad(e) {
			this.ws.pageFun(this.pageDataLoad, this);
			this.baseUrl = baseUrl
			this.id = e.id
			this.getDetail()
			this.userInfo = uni.getStorageSync('userInfo')
		},
		onReachBottom() {
			if (this.status == 'nomore') return
			this.page++
			this.getDetail()
		},
		computed: {
			...mapGetters(['getSocketMessage']),
			socketMessage() {
				return this.getSocketMessage;
			}
		},
		watch: {
			socketMessage(newVal, oldVal) {
				if (newVal) {
					this.ceShow = true
					this.noticeList = [newVal.slice(0, -1)]
					setTimeout(() => {
						this.ceShow = false
					}, 10000)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.bindDetail {
		min-height: 100vh;
		background-color: #fff;

		.dialogMain {
			padding: 30rpx;

			.dialogMain_top {
				display: flex;
				justify-content: flex-end;

				image {
					width: 23rpx;
					height: 23rpx;
				}
			}

			.dialogMain_bottom {
				display: flex;
				justify-content: flex-end;
				color: #045B9B;
				padding-right: 18rpx;
				padding-bottom: 16rpx;
			}
		}

		.bindDetail_bottom {
			padding: 0 30rpx;

			.bindDetail_bottom_item {
				padding: 33rpx 0;
				border-bottom: 1rpx solid #E2E2E2;

				.bindDetail_bottom_item_top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.bindDetail_bottom_item_top_left {
						display: flex;
						justify-content: space-between;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
							margin-right: 25rpx;
						}

						span {
							color: #045B9B;
							font-size: 24rpx;
							max-width: 480rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.bindDetail_bottom_item_top_right {
						font-size: 24rpx;
						color: #999;
					}
				}

				.bindDetail_bottom_item_bottom {
					margin-top: 10rpx;
					font-size: 24rpx;
					padding-left: 74rpx;
				}
			}
		}

		.bindDetail_top {
			padding: 36rpx 0;

			.bindDetail_top_top {
				padding: 0 60rpx;


				image {
					width: 630rpx;
					height: 354rpx;
				}

				.bindDetail_top_top_title {
					margin-top: 35rpx;
				}

				.bindDetail_top_top_date {
					margin-bottom: 40rpx;
					margin-top: 35rpx;
					font-size: 22rpx;
					color: #999;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.user_box {
						display: flex;
						align-items: center;
						color: #333;

						image {
							width: 60rpx;
							height: 60rpx;
							margin-right: 20rpx;
							border-radius: 50%;
						}
					}
				}

				.bindDetail_top_top_ctx {
					margin-top: 28rpx;
					width: 630rpx;

					::v-deep img {
						max-width: 100%;
					}

					::v-deep span {
						text-wrap: wrap !important;
					}
				}

			}

			.bindDetail_top_bottom {
				width: 690rpx;
				margin: 0 auto;
				margin-top: 40rpx;
				padding-bottom: 36rpx;
				border-bottom: 1px solid #E2E2E2;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.bindDetail_top_bottom_vsInput {
					width: 616rpx;
					height: 48rpx;
					background-color: #E2E2E2;
					border-radius: 24rpx;
					padding-left: 40rpx;
					line-height: 48rpx;
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}
</style>